<!-- 开始节点配置 -->
<template>
 <el-form
        class="l-form-config"
        label-width="88px"
        label-position="left"
        size="mini"
    >
    <el-form-item label="节点标识">
      <el-input v-model="node.id" readonly ></el-input>
    </el-form-item>
    <el-form-item label="下一审核人">
      <el-switch :disabled="disabled" v-model="node.isNextAuditor">
      </el-switch>
    </el-form-item>
    <el-form-item label="自定义标题">
      <el-switch :disabled="disabled" v-model="node.isCustmerTitle">
      </el-switch>
    </el-form-item>
    <el-form-item label="通知策略">
      <l-checkbox :disabled="disabled" v-model="node.messageType" :options="[{value:'1',label:'短信'},{value:'2',label:'邮箱'},{value:'3',label:'微信'},{value:'4',label:'站内消息'}]" >
      </l-checkbox>
    </el-form-item>
    <el-divider>表单添加</el-divider>
    <div style="text-align: center;margin-bottom:16px;" >
        <el-radio-group :disabled="disabled" v-model="node.formType" size="mini" @change="handleFormTypeChange">
            <el-radio-button label="1">自定义表单</el-radio-button>
            <el-radio-button label="2">系统表单</el-radio-button>
        </el-radio-group>
    </div>
    <div v-show="node.formType === '1'" >
      <el-form-item label-width="0px">
          <l-custmerform-select
              v-model="node.formCode"
              @change="custmerformChange"
              :disabled="disabled"
              >
          </l-custmerform-select>
      </el-form-item>
      <el-form-item label-width="0px">
          <l-select
              v-model="node.formVerison"
              :disabled="disabled"
              :options="formVerisons"
              @change="custmerformVerisonChange"

              placeholder="请选择表单版本"
              >
          </l-select>
      </el-form-item>
      <el-form-item label-width="0px">
          <l-select
              v-model="node.formRelationId"
              :disabled="disabled"
              :options="node.formRelations"
              
              placeholder="请选择流程关联字段"
              >
          </l-select>
      </el-form-item>
    </div>
    <div v-show="node.formType === '2'" >
      <el-form-item label-width="0px">
          <el-input
              v-model="node.formUrl"
              placeholder="请输入PC端表单地址"
              :readonly="disabled"
              >
          </el-input>
      </el-form-item>
      <el-form-item label-width="0px">
          <el-input
              v-model="node.formAppUrl"
              placeholder="请输入APP端表单地址"
              :readonly="disabled"
              >
          </el-input>
      </el-form-item>
    </div>
    <el-divider>表单字段权限</el-divider>
    <template v-if="node.formType === '1'">
      <l-table height="notset" :isShowNum="false" :columns="columns" :dataSource="node.authFields" ref="authField" >
          <template v-slot:required="scope" >
            <el-switch
                v-model="scope.row.required"
                :disabled="disabled || scope.row.type == 'grid'"
                >
            </el-switch>
          </template>
          <template v-slot:isEdit="scope" >
            <el-switch
                v-model="scope.row.isEdit"
                :disabled="disabled || scope.row.type == 'gridrequired'"
                >
            </el-switch>
          </template>
          <template v-slot:isLook="scope" >
            <el-switch
                v-model="scope.row.isLook"
                :disabled="disabled || scope.row.type == 'grid' || scope.row.type == 'gridrequired'"
                >
            </el-switch>
          </template>
      </l-table>
    </template>
    <template v-else>
      <l-edit-table
          addBtnText="添加字段"
          :dataSource="node.authFields"

          :isShowNum="false"

          @addRow="handleAddAuthField"
          @deleteRow="handleDeleteAuthField"
          >
          <el-table-column
          prop="label"
          label="名称"
          minWidth="100">
              <template slot-scope="scope">
                  <el-input :readonly="disabled" size="mini" v-model="scope.row.label" placeholder="请输入" ></el-input>
              </template>
          </el-table-column>
          <el-table-column
              prop="field"
              label="字段"
              minWidth="100">
              <template slot-scope="scope">
                  <el-input :readonly="disabled" size="mini" v-model="scope.row.field" placeholder="请输入"></el-input>
              </template>
          </el-table-column>
          <el-table-column
              prop="required"
              label="必填"
              width="64">
              <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.required"
                      :disabled="disabled"
                      >
                  </el-switch>
              </template>
          </el-table-column>
          <el-table-column
              prop="isEdit"
              label="编辑"
              width="64">
              <template slot-scope="scope">
                  <el-switch
                      v-model="scope.row.isEdit"
                      :disabled="disabled"
                      >
                  </el-switch>
              </template>
          </el-table-column>
          <el-table-column
              prop="isLook"
              label="查看"
              width="64">
              <template slot-scope="scope">
                   <el-switch
                        v-model="scope.row.isLook"
                        :disabled="disabled"
                        >
                    </el-switch>
              </template>
          </el-table-column>
      </l-edit-table >
    </template>
 </el-form>
</template>

<script>
const apiForm = window.$api.custmerForm.scheme

export default {
    name:'start-event-option',
    props:{
      disabled:{
          type:Boolean,
          default:false
      }
    },
    data () {
        return {
          columns:[
            {label:'名称',prop:'label',minWidth:'100'},
            {label:'字段',prop:'field',minWidth:'100'},
            {label:'必填',prop:'required',width:'64',align:'center'},
            {label:'编辑',prop:'isEdit',width:'64',align:'center'},
            {label:'查看',prop:'isLook',width:'64',align:'center'},
          ],
          tableBtns:[
            {prop:'Delete',label:'删除'}
          ],
          formRelations:[]
        }
    },
    asyncComputed:{
      formVerisons:{
        async get(){
            let res = []
            if(!this.$validatenull(this.node.formCode) && this.node.formType =='1'){
              res = await this.$awaitWraper(apiForm.getHistoryList(this.node.formCode))
            }
            return (res || []).map(t=>{return { label:this.lr_dateFormat(t.f_CreateDate),value:t.f_Id }})
        }
      }
    },
    computed: {
        node(){
          return this.wfdesign.currentWfNode;
        }
    },
    inject: ["wfdesign"],
    methods:{
      async custmerformChange(val){
        this.$set(this.node,'formRelationId','')
        if(val == null){
            this.node.authFields = [];
            this.node.formVerison = ''
            return;
        }
        if(this.$validatenull(this.wfdesign.custmerformSchemes[val.f_SchemeId])){
          const {f_SchemeInfoId,f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.f_SchemeId))) || {}
          this.wfdesign.custmerformSchemes[f_Id] = {f_Scheme}
          if(this.node.formCode == f_SchemeInfoId){
            this.loadFormScheme(f_Scheme)
          }
        }
        else{
          this.loadFormScheme(this.wfdesign.custmerformSchemes[val.f_SchemeId].f_Scheme);
        }
        this.node.formVerison = val.f_SchemeId
      },
      async custmerformVerisonChange(val){
        this.$set(this.node,'formRelationId','')
        if(this.$validatenull(val)){
            this.node.authFields = []
            return
        }
        if(this.$validatenull(this.wfdesign.custmerformSchemes[val.value])){
          const {f_Scheme,f_Id} = (await this.$awaitWraper(apiForm.getHistory(val.value))) || {}
          this.wfdesign.custmerformSchemes[f_Id] = {f_Scheme}
          if(this.node.formVerison == f_Id){
            
            this.loadFormScheme(f_Scheme)
          }
        }
        else{
          this.loadFormScheme(this.wfdesign.custmerformSchemes[val.value].f_Scheme);
        }
      },
      loadFormScheme(strScheme){
        const scheme = JSON.parse(strScheme)
        const fields = []
        const rfields = []
        scheme.formInfo.tabList.forEach(tab => {
          tab.components.forEach(component =>{
            if(['guid'].includes(component.type)){
              rfields.push({label:component.label,value:component.prop})
            }

            if(!['gridtable','divider'].includes(component.type) && component.display){
              fields.push({
                prop:component.prop,
                field:component.field,
                label:component.label,
                table:component.table,
                required:component.required,
                isEdit:true,
                isLook:true
              })
            }
            else if(['gridtable'].includes(component.type)){
              fields.push({
                prop:`${component.prop}_add`,
                label:`${component.label || '表格'}-添加按钮`,
                required:false,
                isEdit:true,
                isLook:false,
                type:'grid'
              })
              fields.push({
                prop:`${component.prop}_remove`,
                label:`${component.label || '表格'}-删除按钮`,
                required:false,
                isEdit:true,
                isLook:false,
                type:'grid'
              })

              fields.push({
                prop:`${component.prop}_required`,
                label:`${component.label || '表格'}-数据`,
                required:component.required,
                isEdit:false,
                isLook:false,
                type:'gridrequired'
              })
              fields.push(...component.children.filter(t=>t.display).map(t=>{
                return {
                  gridprop:component.prop,
                  prop:t.prop,
                  field:t.field,
                  label:`${component.label || '表格'}-${t.label}`,
                  table:component.table,
                  required:t.required,
                  isEdit:true,
                  isLook:true
                }
              }))
            }
          })
        })
        
        
        
        this.node.formRelations = rfields
        this.node.authFields = fields
        
      },
      handleFormTypeChange(){
        this.node.formCode = ''
        this.node.formUrl = ''
        this.node.formAppUrl = ''
        this.node.authFields = []
        this.node.formRelations = []

        this.$set(this.node,'formRelationId','')
        
      },
      handleAddAuthField(){
        this.node.authFields.push({
          field:'',
          label:'',
          required:true,
          isEdit:true,
          isLook:true
        })
      },
      handleDeleteAuthField(){

      }
    }
    
}
</script>
